<!-- Dom模板 -->
<template>
  <div class="box">
    <!-- 团餐定制 -->

    <!-- 返回头 -->
    <div>
      <Fanhui :a="as"></Fanhui>
    </div>

    <!-- 搜索框 -->
    <div class="sousuo">
      <i class="el-icon-search souds"></i>
      <input class="inputse" type="text" placeholder="厨师姓名关键词搜索" />
    </div>

    <!-- 二级路由导航栏 -->
    <div class="dicjd">
      <ul class="dsadasw">
        <router-link
          :to="item.path"
          tag="li"
          v-for="(item, index) in dataList"
          :key="index"
          :class="$route.meta.nowIndex === index ? 'active' : ''"
        >
          {{ item.meta.title }}
        </router-link>
      </ul>
      <router-view />
    </div>


  </div>
</template>

<script>
import Fanhui from "../utils/fanhui.vue"; // 引入组件

export default {
  name: "",
  components: {
    Fanhui,
  },
  data() {
    return {
      msg: "测试",
      as: "团餐定制",
      dataList: [],
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    console.log(this.$router.options.routes);
    let dataListNav = this.$router.options.routes.filter((item) => {
      console.log(!item.meta.hidden && item.meta.footerNav);
      return !item.meta.hidden && item.meta.footerNav;
    });
    console.log(dataListNav);
    this.dataList = dataListNav[0].children.filter((item) => {
      return item.meta.footer;
    });
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    //this.users(1);
  },
  // Vue方法定义
  methods: {},
};
</script>

<style scoped>
.dsadasw {
  list-style: none;
   display: inline-block;
  margin: 8px 30px;
}
.dsadasw li {
      float: left;
    margin: 0 34px 0 17px;
}
.active {
  color: yellowgreen;

}
/* @import url(''); 引入css类 */

/* .dawdsa {
  display: inline-block;
  float: left;
  margin: 8px 30px;
} */
.dicjd {
         height: 40px;
    width: 357px;
    margin: 5px 0 0px 8px;
}

.souds {
  position: absolute;
  left: 70px;
  top: 78px;
}
.sousuo input {
  height: 38px;
  width: 297px;
  widows: 306px;
  text-align: center;
  line-height: 38px;
  color: rgb(107, 105, 105);
  box-shadow: 1px 1px 9px 5px #b7b8b95b;
  border-radius: 28px 28px 28px 28px;
  margin: 9px 50px;
  border: none;
  background: none;
  outline: none;
}
.inputse:focus {
  border: none;
}
.box {
  height: 100%;
  width: 100%;
}
</style>